<template>
  <div class="global">
    <!-- 数据概况 -->
    <div style="margin-bottom: 20px">
      <el-card shadow="hover">
        <div style="margin-bottom: 10px">
          <span style="font-size: 24px; color: #000000">数据概况</span>
        </div>

        <div style="display: flex">
          <div style="background-color: #f2f6fc; width: 290px; height: 100px">
            <div
              style="
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 10px;
              "
            >
              <span style="font-size: 17px; color: #606266">用户</span>
            </div>
            <div style="display: flex">
              <span
                style="
                  font-size: 24px;
                  font-weight: bolder;
                  margin-left: 20px;
                  color: #337ecc;
                "
                >985</span
              >
              <span style="color: #606266; font-size: 17px; margin-left: 80px"
                >昨日新增：<span style="font-size: 17px; color: #529b2e"
                  >40</span
                ></span
              >
            </div>
          </div>

          <div
            style="
              margin-left: 20px;
              background-color: #f2f6fc;
              width: 290px;
              height: 100px;
            "
          >
            <div
              style="
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 10px;
              "
            >
              <span style="font-size: 17px; color: #606266">会议</span>
            </div>
            <div style="display: flex">
              <span
                style="
                  font-size: 24px;
                  font-weight: bolder;
                  margin-left: 20px;
                  color: #337ecc;
                "
                >1245</span
              >
              <span style="color: #606266; font-size: 17px; margin-left: 80px"
                >昨日新增：<span style="font-size: 17px; color: #529b2e"
                  >53</span
                ></span
              >
            </div>
          </div>

          <div
            style="
              margin-left: 20px;
              background-color: #f2f6fc;
              width: 290px;
              height: 100px;
            "
          >
            <div
              style="
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 10px;
              "
            >
              <span style="font-size: 17px; color: #606266">评价</span>
            </div>
            <div style="display: flex">
              <span
                style="
                  font-size: 24px;
                  font-weight: bolder;
                  margin-left: 20px;
                  color: #337ecc;
                "
                >4568</span
              >
              <span style="color: #606266; font-size: 17px; margin-left: 80px"
                >昨日新增：<span style="font-size: 17px; color: #529b2e"
                  >658</span
                ></span
              >
            </div>
          </div>

          <div
            style="
              margin-left: 20px;
              background-color: #f2f6fc;
              width: 290px;
              height: 100px;
            "
          >
            <div
              style="
                padding-top: 20px;
                padding-left: 20px;
                padding-bottom: 10px;
              "
            >
              <span style="font-size: 17px; color: #606266">反馈</span>
            </div>
            <div style="display: flex">
              <span
                style="
                  font-size: 24px;
                  font-weight: bolder;
                  margin-left: 20px;
                  color: #337ecc;
                "
                >321</span
              >
              <span style="color: #606266; font-size: 17px; margin-left: 80px"
                >昨日新增：<span style="font-size: 17px; color: #529b2e"
                  >38</span
                ></span
              >
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 近一个月数据展示 -->
    <div>
      <el-card shadow="hover">
        <Echart />
      </el-card>
    </div>
  </div>
</template>
  
  
  <script setup>
import { onMounted} from "vue";
import Echart from "@/views/echart/Echart";
import { ElNotification } from "element-plus";
import { getFeedBackData } from "@/api/index";

onMounted(() => {
  getFeedBackData().then((res) => {
    if (res.code === 200) {
      if (res.data != 0) {
        ElNotification.success({
          title: "反馈消息",
          message: "有" + res.data + "条反馈内容需回复！",
          showClose: false,
        });
      }
    }
  });
});
</script>
  
  
  <style scoped>
.global {
  background-color: #f5f5f5;
  height: 85vh;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
</style>